{extend name="main"}
{block name="style"}
{css href="__PLUGIN_SRC__/Swiper/swiper.min.css"}
<style type="text/css">
    .banner-container {
      width: 100%;
      height: 265px;
    }
    .banner-container .swiper-slide a{width:100%;}
    .banner-container .swiper-slide img{width:100%;height: 265px;}
    .banner-container .swiper-pagination-bullet-active{background:#fff;}
	.text-white .el-tabs__item{color: #fff;}
	.el-tabs__nav-wrap::after{display: none;}
	.el-tabs__header{margin-bottom: 1px;}
	.rounded-0 .el-textarea__inner{border-radius: 0;}
	.search .el-input__inner{border-left: 0;}
	.find-border-top-0 .border-top:nth-of-type(1){border-top: 0 !important;}
</style>
{/block}
{block name="header"}
{include file="module/top_nav" container="container-xl"/}
{include file="module/header_concise"/}
{/block}
{block name="body"}
<div class="container-xl">
	{xycms:hasads alias="news_banner"}
	<div class="swiper-container banner-container mt-3">
		<div class="swiper-wrapper">
			{xycms:ads alias="news_banner" name='v' length="9"}
		  	<div class="swiper-slide text-v-center">
		  		{empty name="v.url"}
		      	<a class="s {$v.ads_icon?'ads-icon':''}" title="{$v.title}">
		  		{else/}
		      	<a href="{$v.url}" class="s {$v.ads_icon?'ads-icon':''}" target="_blank" title="{$v.title}">
		  		{/empty}
		      		<img src="{xycms:web name="imgurl"/}{$v.path}">
		      	</a>
		  	</div>
			{/xycms:ads}
		</div>
		<div class="swiper-pagination"></div>
	</div>
	{/xycms:hasads}
</div>
<div class="container-xl">
	<div class="search py-4 flex flex-center">
		{empty name="logo"}
		<a href="/" class="logo">
			<img src="{xycms:web name="logo"}">
		</a>
		{else/}
		<a href="/" class="logo">
			<img src="{$logo}">
		</a>
		{/empty}
		<div class="flex-1 pl-5">
			<el-form @submit.native.prevent="setSearchItemKey" class="shadow">
				<el-input placeholder="请输入关键字" v-model="search.key" class="input-with-select el-input__inner-left-none shadow"
				clearable>
				    <el-button native-type="submit" slot="append">搜索</el-button>
				</el-input>
			</el-form>
		</div>
	</div>
</div>
<div class="container-xl">
	<div class="px-3 py-2 bg-white shadow flex">
		<a href="/article/type/all.html" class="px-4 py-2 text-dark active-item {eq name="$alias" value="all"}active{/eq}">
			全部
		</a>
		{xycms:articlecatelist name="v" alias="find"}
		<a href="/article/type/{$v.alias}.html" class="px-4 py-2 text-dark active-item {eq name="$alias" value="$v.alias"}active{/eq}">
			{$v.title}
		</a>
	    {/xycms:articlecatelist}
	</div>
</div>
<div class="container-xl py-3">
	<div class="flex flex-top">
		<div class="flex-1 shadow">
			{xycms:articlepage name="v" alias="$alias"}
			<div class="bg-white p-4 flex">
				{notempty name="v.thumb"}
				{volist name="v.thumb" id="thumb" length="1"}
				<div class="bg-white text-truncate rounded mr-3" style="width:180px;height: 120px;">
					<img src="{$thumb}" style="object-fit: contain;width: 100%;height: 100%;">
				</div>
				{/volist}
				{else/}
				<div class="bg-white text-truncate rounded mr-3" style="width:180px;height: 120px;">
					<img src="__TEMPLATE_STATIC__/article_no.png" style="object-fit: contain;width: 100%;height: 100%;">
				</div>
				{/notempty}
				<div class="flex-1 flex" style="flex-direction: column; justify-content: space-between;">
					<a href="/article/content/{$v.id}.html" class="h6 mb-0 text-dark font-weight-600 text-ellipsis" target="_blank"><span class="{$v.cla}">{$v.title}</span></a>
					<div class="text-grey text-ellipsis-3">{$v.desc}</div>
					<div class="flex text-grey pt-2">
						<div class="flex-1">文章来源：{$v.source}</div>
						<div class="flex-1"><i class="el-icon-time mr-1"></i>{$v.start_time|date="Y-m-d"}</div>
						<div><i class="el-icon-view mr-1"></i>{$v.view}</div>
					</div>
				</div>
			</div>
			{/xycms:articlepage}
			{notempty name="article_"}
			<div class="text-center bg-white py-3">
				{$article_->render()|raw}
			</div>
			{/notempty}
		</div>
		<div class="w-300px ml-3">
			<div class="ads">
				{xycms:ads alias="article_list" name='v' length='3'}
		      	<div class="text-v-center shadow mb-3">
		      		{empty name="v.url"}
			      	<a title="{$v.title}" class="{$v.ads_icon?'ads-icon':''}">
		      		{else/}
			      	<a href="{$v.url}" class="s {$v.ads_icon?'ads-icon':''}" target="_blank" title="{$v.title}">
		      		{/empty}
						<img src="{xycms:web name="imgurl"/}{$v.path}" class="w-300px">
			      	</a>
		      	</div>
				{/xycms:ads}
			</div>
			<div class="bg-white p-3 shadow">
				<div class="flex mb-3">
					<div class="flex-1 block-title-before pb-2">热门资讯</div>
				</div>
				<ul class="article-notice-content style-none text-left mb-0 overflow-hidden">
				{xycms:articlelist alias="hot" name='v' length="20"}
				<li class="{$v.cla}">
					<div class="flex py-1 flex-center">
						<div class="mr-2 article-notice-icon">{$i}</div>
						<a href="/article/content/{$v.id}.html" class="flex-1 text-truncate text-dark pr-3" target="_blank"><span class="{$v.cla}">{$v.title}</span></a>
					</div>
				</li>
				{/xycms:articlelist}
				</ul>
			</div>
		</div>
	</div>
</div>
{/block}
{block name="footer"}
{include file="module/footer"/}
{include file="module/login"/}
{/block}
{block name="script"}
{js href="__PLUGIN_SRC__/Swiper/swiper.min.js"}
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			loginTabs:XYBase.loginTabs,
			userInfo:UserInfo,
			feedback:XYBase.feedback,
			search:{
				key:'{notempty name=":request()->get('key')"}{:htmlentities(request()->get("key"))}{/notempty}'
			},
		},
		watch:{
		    view:XYBase.viewWatch,
		    loginTabs:XYBase.loginTabsWatch,
		},
		created(){
			XYBase.created(this);
		},
		methods:XYBase.methods({
			sendSearch(){
				window.location.href="?key="+this.search.key
			}
		})
	});
	{xycms:hasads alias="pc_news_banner"}
    var swiper = new Swiper('.banner-container', {
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      autoplay:true
    });
	{/xycms:hasads}
</script>
{/block}